@import '../../base.scss';
.common-details{
    position: relative;
    .body{
        background: none;
    }
    .icon{
        &::before{
           display: inline-block;
           content: '';
           vertical-align: middle;
           margin-right: rem(15px);
        }
   }
  .details-banner{
        height: rem(360px);
        background-color: #1a8afa;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .details-banner-img{
        height: rem(153px/1.2);
        width: rem(191px/1.2);
        }
        p{
            margin-top: rem(20px);
            display: inline-block; 
            color: #ffffff;
            font-size: 16px;
        
        }
    .driver-info{
        font-size: 14px;
            span{
                margin: 0 5px;
            }      
        }
    
    }
    .title-info-item{
        text-align: center;
        background-color:#ffffff; 
        margin-top:rem(20px);
       
        font-size: 18px;
        color: #000000;
        >.info-item-title{

            padding: rem(20px) rem(15px);
            border-bottom: rem(1px) solid #f0f0f0;
        }
      
        &.cost-info-item .info-item>li>p,
        &.remarks-info-item .info-item>li>p{
            color: #1a8afa;
        }
    }
     .cost-info-item{
         .info-item-title{
            width:50%;
            margin: 0 auto;
         }
       
     }
    .remarks-info-item{
       
       .remarks-info-item-title{
          min-width:30%;
          max-width: 60%;
          margin: 0 auto;
        
       }
      
     
    }
    .order-info-item{
     
        .order-info-item-title{
            padding-left: 0;
            padding-right: 0;
            margin: 0 rem(20px);
            font-size: 16px;
            color: #222222;
            border-bottom: rem(1px) solid #f0f0f0;
            display: flex;
            flex-direction: row;
            .icon{
                &::before{
                    position: relative;
                    top:-1px;
                    height: rem(36px);
                    width:rem(30px);
                    @include bg-image('./icon_dingdan')
                }
           }
        }
    }
    .info-item{
        background-color:#ffffff; 
        padding:0 rem(15px);
        
        >li{
         display: flex;
          flex-direction: row;
          border-bottom: rem(1px) solid #f0f0f0;
          align-items: center;
          justify-content: space-between;
          padding: rem(26px) 0;
          &:last-of-type{
            border-bottom: none;
          }
          &.info-item-three{
            
              >p{
                &:nth-of-type(1){
                   text-align:left;
                }
                &:nth-of-type(2){
                    text-align:center;
                 }
              }
          }
            >p{
                flex:4;
                font-size: 16px;
                text-align: right;
                line-height: rem(40px);
            }
            >span{
                color: #666666;
                font-size: 14px;
                display: inline-block;
                flex:1;
               
            }
        }
         &.addree-info{
            >li{
                >span{
                    &::before{
                        position: relative;
                        top:-1px;
                        height: rem(30px);
                        width:rem(30px);
                    }
                }
              
                &.start-addree {
                    p{
                        color: #00d231;
                    }
                    span{
                      &::before{
                            @include bg-image('./icon_chufadi')
                        }
                    
                    }
                }
                &.over-addree{
                    p{
                        color: #ff6d00;
                    }
                    span{
                        
                        &::before{
                            @include bg-image('./icon_mudidi')
                        }
                    
                    }
                }
               
            }
        }
    }
}
// .fr {
//     float: right;
// }

// .details {
//     .details-bg {
//         height: rem(300px);
//         background: #1a8afa;
//         position: relative;
//         display: flex;
//         align-items: center;
//         flex-direction: column;
//         justify-content: center;
      
//         .details-img a {
//             display: inline-block;
//             height: rem(120px);
//             width: rem(120px);
//             @include bg-image('./icon_yongcheshenqing')
//         }
//         .details-font {
//             font-size: 16px;
//             color: #FFFFFF;
//             text-align: center;
//         }
//     }
//     .details-adress {
//         .adress {
//             height: rem(70px);
//             background: white;
//             position: relative;
//             display: flex;
//         }
//         .adress a {
//             display: inline-block;
//             height: rem(28px);
//             width: rem(28px);
//             position: absolute;
//             left: 2%;
//             top: 22%;
//         }
//         .adress i {
//             font-size: 12px;
//             position: absolute;
//             left: 8%;
//             top: 30%;
//             color: gray;
//         }
//         .adress span {
//             font-size: 12px;
//             position: absolute;
//             right: 2%;
//             top: 30%;
//         }
//         .adress-top span {
//             color: #00d231;
//         }
//         .adress-bottom span {
//             color: #ff6d00;
//         }
//         .adress-top a {
//             @include bg-image('./icon_chufadi');
//         }
//         .adress-bottom a {
//             @include bg-image('./icon_mudidi');
//         }
//         .solid {
//             width: 95%;
//             height: rem(1px);
//             background: #cccccc;
//             margin: 0 auto;
//         }
//     }
//     .order-bg {
//         background: #FFFFFF;
//         .order {
//             width: 95%;
//             margin: 0 auto;
//             margin-top: rem(20px);
//             margin-bottom: rem(20px);
//             .order-height {
//                 height: rem(75px);
//                 border-bottom: rem(1px) solid #f0f0f0;
//                 font-size: 14px;
//                 line-height: rem(75px);
//                 overflow: hidden;
//             }
//             .order-number {
//                 position: relative;
//             }
//             .order-number a {
//                 position: absolute;
//                 display: inline-block;
//                 height: rem(28px);
//                 width: rem(28px);
//                 @include bg-image('./icon_dingdan');
//                 top: 27%;
//                 left: 0%;
//             }
//             .order-number i {
//                 margin-left: 5%;
//             }
//             .order-number span {
//                 margin-left: 2%;
//             }
//             .order-start span {
//                 float: right;
//             }
//             .order-end span {
//                 float: right;
//             }
//             .order-start i {
//                 color: gray;
//             }
//             .order-end i {
//                 color: gray;
//             }
//             .order-user {
//                 background: #FFFFFF;
//                 overflow: hidden;
//                 padding-top: rem(20px);
//                 padding-bottom: rem(20px);
//                 font-size: 14px;
//                 display: flex;
//                 justify-content: space-between;
//                 align-items: Center;
//             }
//             .order-user .user-name {
//                 width: rem(100px);
//             }
//         }
//     }
//     .message-bg {
//         background: #FFFFFF;
//         .message {
          
//             margin: 0 auto;
//             overflow: hidden;
//             font-size: 14px;
//             .message-title {
//                 font-size: 16px;
//                 margin: 0 auto;
//                 width: rem(150px);
//                 border-bottom: rem(1px) solid #f0f0f0;
//                 padding-top: rem(20px);
//                 padding-bottom: rem(20px);
//                 text-align: center;
//             }
//             .message-height {
//                 height: rem(75px);
//                 border-bottom: rem(1px) solid #f0f0f0;
//                 line-height: rem(75px);
//                 overflow: hidden;
//                 display: flex;
//                 justify-content: space-between;
//                 align-items: Center;
//             }
//             .message-height i {
//                 color: gray;
//             }
//             .message-height span {
//                 color: cornflowerblue;
//             }
//             .message-remarks {
//                 display: inline-block;
//                 color: cornflowerblue;
//                 width: rem(400px);
//                 text-align: right;
//             }
//             .message-remark {
//                 overflow: hidden;
//                 display: flex;
//                 justify-content: space-between;
//                 align-items: Center;
//                 padding-top: rem(20px);
//                 padding-bottom: rem(20px);
//             }
//             .message-remark i {
//                 color: gray;
//             }
//         }
//     }
// }